<!DOCTYPE html>

<!--看看thymeleaf官方文档 命名空间-->
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!--看bootstrap官方文档-->
    <!--用ie浏览器的最高版本渲染页面 也就是使用edge-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置： 视口的宽度和设备一致，默认的缩放比例和pc一致，用户不能自行缩放 响应式布局-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template test</title>


    <!-- 解决ie9一下浏览器对html5新标签不识别，并导致css不起作用问题-->
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <!-- 解决ie9以下浏览器对css3 media query不识别问题-->
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <!-- 引入Bootstrap样式和js -->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap.min.css}">

    <!--引入自定义样式 虽然yml中配置static-locations可以让页面直接访问，但是并没有经过视图解析器，
    所以浏览器不认识thymeleaf相关语法，所以要通过controller返回-->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/test.css}" />

    <style>
        /*选择类名以col开头的元素*/
        [class^="col"] {
            border: 1px solid #ccc;
        }

        .row>div {
            height: 50px;
            background-color: #2aabd2;
        }

    </style>

</head>


<body>

<div class="test" >hello world</div>

<!--使用class="container"响应式布局容器，不用关心媒体查询项目的问题了；我们使用响应式开发
  可以使用class="container-fluid"流式布局容器，百分百宽度，适合单独做移动开发
-->
<div class="container" >hello world</div>
<div class="container-fluid" >hello world</div>


<div class="container" >
    <div class="row">
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
    </div>
    <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-2">4</div>
    </div>
    <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-1">4</div>
    </div>
    <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>
    </div>

    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1111</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2222</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3333</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4444</div>
    </div>

<!--栅格系统列嵌套-->
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-4">aaaaa</div>
                <div class="col-md-8">bbbbb</div>
            </div>
        </div>
        <div class="col-md-4">2222</div>
        <div class="col-md-4">3333</div>
    </div>

<!--    栅格系统列偏移 偏移大小col-md-offset=12-3-3 -->
    <div class="row">
        <div class="col-md-3">左侧</div>
        <div class="col-md-3 col-md-offset-6">右侧</div>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">中间</div>
    </div>
<!--    栅格系统列排序-->
    <div class="row">
        <div class="col-md-3 ">左侧</div>
        <div class="col-md-9 ">右侧</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-push-9">左侧</div>
        <div class="col-md-9 col-md-pull-3">右侧</div>
    </div>

<!--    栅格系统响应式工具 隐藏和显示-->
    <div class="row">
        <div class="col-xs-3 visible-lg">大屏显示1</div>
        <div class="col-xs-3">显示2</div>
        <div class="col-xs-3 hidden-md hidden-xs">中频 最小屏隐藏3</div>
        <div class="col-xs-3">显示4</div>
    </div>

</div>




<button type="button" class="btn btn-success">（成功）Success</button>

</body>

</html>
